<template>
	<e-popup :overlay="props.overlay" :closeOnClickOverlay="props.closeOnClickOverlay" mode="bottom" :show="props.show"
		:safeAreaInsetBottom="props.safeAreaInsetBottom" @close="popupClose" :zIndex="props.zIndex" :customStyle="{
			backgroundColor: 'rgb(214, 218, 220)'
		}">
		<view class="e-keyboard">
			<slot />
			<view class="e-keyboard__tooltip" v-if="props.tooltip">
				<view hover-class="e-hover-class" :hover-stay-time="100">
					<text class="e-keyboard__tooltip__item e-keyboard__tooltip__cancel" v-if="props.showCancel"
						@tap="onCancel">{{props.showCancel && props.cancelText}}</text>
				</view>
				<view>
					<text v-if="showTitle" class="e-keyboard__tooltip__item e-keyboard__tooltip__tips">{{props.tips ? props.tips :
					props.mode == 'number' ? '数字键盘' : props.mode == 'card' ? '身份证键盘' : '车牌号键盘'}}</text>
				</view>
				<view hover-class="e-hover-class" :hover-stay-time="100">
					<text v-if="props.showConfirm" @tap="onConfirm"
						class="e-keyboard__tooltip__item e-keyboard__tooltip__submit"
						hover-class="e-hover-class">{{props.showConfirm && props.confirmText}}</text>
				</view>
			</view>
			<template v-if="mode == 'number' || mode == 'card'">
				<e-number-keyboard :random="props.random" @backspace="backspace" @change="change" :mode="props.mode"
					:dotDisabled="props.dotDisabled"></e-number-keyboard>
			</template>
			<template v-else>
				<!-- <e-car-keyboard :random="random" :autoChange="autoChange" @backspace="backspace" @change="change">
				</e-car-keyboard> -->
			</template>
		</view>
	</e-popup>
</template>

<script lang="ts">
	import {
		defineComponent
	} from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	/**
	 * keyboard 键盘
	 * @description 此为uViw自定义的键盘面板，内含了数字键盘，车牌号键，身份证号键盘3中模式，都有可以打乱按键顺序的选项。
	 * @tutorial https://www.uviewui.com/components/keyboard.html
	 * @property {String}			mode				键盘类型，见官网基本使用的说明 （默认 'number' ）
	 * @property {Boolean}			dotDisabled			是否显示"."按键，只在mode=number时有效 （默认 false ）
	 * @property {Boolean}			tooltip				是否显示键盘顶部工具条 （默认 true ）
	 * @property {Boolean}			showTitle			是否显示工具条中间的提示 （默认 true ）
	 * @property {String}			title				工具条中间的提示文字，见上方基本使用的说明，如不需要，请传""空字符
	 * @property {Boolean}			showCancel			是否显示工具条左边的"取消"按钮 （默认 true ）
	 * @property {Boolean}			showConfirm			是否显示工具条右边的"完成"按钮（ 默认 true ）
	 * @property {Boolean}			random				是否打乱键盘按键的顺序 （默认 false ）
	 * @property {Boolean}			safeAreaInsetBottom	是否开启底部安全区适配 （默认 true ）
	 * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩收起键盘 （默认 true ）
	 * @property {Boolean}			show				控制键盘的弹出与收起（默认 false ）
	 * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
	 * @property {String | Number}	zIndex				弹出键盘的z-index值 （默认 10075 ）
	 * @property {String}			cancelText			取消按钮的文字 （默认 '取消' ）
	 * @property {String}			confirmText			确认按钮的文字 （默认 '确认' ）
	 * @property {Boolean}			autoChange          mode为car时，输入一个中文后，是否自动切换到英文 （默认 false ）
	 * @property {Object}			customStyle			自定义样式，对象形式
	 * @event {Function} change 按键被点击(不包含退格键被点击)
	 * @event {Function} cancel 键盘顶部工具条左边的"取消"按钮被点击
	 * @event {Function} confirm 键盘顶部工具条右边的"完成"按钮被点击
	 * @event {Function} backspace 键盘退格键被点击
	 * @example <e-keyboard mode="number" v-model="show"></e-keyboard>
	 */

	export default defineComponent({
		name: "e-keyboard",
		mixins: [mpMixin],
	});
</script>

<script lang="ts" setup>
	import {
		toRefs
	} from 'vue'
	import {
		keyboardProps,
		keyboardEmits
	} from './props';
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";

	const {
		keyboard: keyboardDefaultProps
	} = toRefs(componentsProps);

	const _props = defineProps(keyboardProps)

	const props = useDefaultProps<DefaultProps['keyboard']>(_props, keyboardDefaultProps);
	const emit = defineEmits(keyboardEmits)

	const change = (e : string) => {
		emit('change', e);
	}
	// 键盘关闭
	const popupClose = () => {
		emit('close');
	}
	// 输入完成
	const onConfirm = () => {
		emit('confirm');
	}
	// 取消输入
	const onCancel = () => {
		emit('cancel');
	}
	// 退格键
	const backspace = () => {
		emit('backspace');
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/keyboard.scss";
</style>